<!DOCTYPE html>
<!-- saved from url=(0047)http://www.jq22.com/demo/photoclip201709140143/ -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0">
		<title>设置头像</title>
		<link rel="stylesheet" type="text/css" href="aui.css">
		<link rel="stylesheet" href="intial.css">
		<style type="text/css">
			*{
				font-family: "黑体";
			}
			body,html{
				height: 100%;
				overflow: auto;
			}
			html{ background-color: hsla(0,0%,96%,1.00);
			}
			body{
				background: none;
			}
			section{
				padding-top: 3rem;
				font-size: 0.9rem;
			}
			#headimg{
				width: 4rem;
				height: 4rem;
				border: 2px solid #ffffff;
				margin: auto;
				margin-bottom: 1.7rem;
				/*background-size:100% 100% !important;*/
				/*background-repeat:no-repeat;*/
				/*background-position: center center;*/
			}
			#headimg img{
				width: 4rem;
			}
			.btn{
				position: relative;
				z-index: 10;
				padding: 0.5rem;
				height: 1.6rem;
				line-height: 1.6rem;
				margin: auto;
				font-size: 0.8rem;
				color: #fd1142!important;
				border:1px solid  #fd1142;
				border-radius:0.2rem ;
			}
			.btn img{
				display: inline-block;
				width: 0.75rem;
				margin-left: 0.1rem;
			}


			/*截图上传页面*/
			.clipbg{
				position: fixed;
				background: black;
				top: 0;
				z-index: 999;
				width: 100%;
				height: 100%;
				left: 0;
			}
			.loading{
				position: absolute;
				top: 40%;
				width: 38%;
				left: 31%;
				height: 1.6rem;
				line-height: 1.6rem;
				z-index: 99999;
				text-align: center;
				color: #ffffff;
				border-radius:0.2rem ;
				background: #9f9f9f;
			}
			.clipbg #clipArea{
				width: 100%;
				height: 80%;
				margin: auto;

			}
			.clipbg .footer{
				width: 90%;
				position: fixed;
				left: 5%;
				bottom: 0px;
				text-align: center;
			}
			.clipbg dl{
				background: #ffffff;
				border-radius: 0.4rem;
				overflow: hidden;
				margin-bottom: 0.6rem;
			}
			.clipbg dd{
				position: relative;
				height: 2.25rem;
				line-height: 2.25rem;
				border-bottom:1px solid #999999 ;
			}
			.clipbg .back{
				height: 2.25rem;
				line-height:2.25rem;
				border-radius: 0.4rem;
				margin-bottom: 0.4rem;
				background: #ffffff;
			}
			.clipbg dd input{
				position: absolute;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: 11;
				filter:alpha(opacity=0);
			  -moz-opacity:0;
			  -khtml-opacity: 0;
			  opacity: 0;
			}
		</style>
	</head>
	<body>
		<section class="aui-text-center">
			<div id="headimg"><img src="../../images/head.jpg"></div>
			<span class="btn">
				点击设置头像
			</span>
		</section>
		<!--图片裁剪-->
		<div class="clipbg displaynone">
			<div id="clipArea" style="user-select: none; overflow: hidden; position: relative;"><div class="photo-clip-layer" style="position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px;"><div class="photo-clip-move-layer" style="transform-origin: 0px 0px 0px; transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) scale(1) translateZ(0px); width: 0px; height: 0px;"><div class="photo-clip-rotation-layer"></div></div></div><div class="photo-clip-mask" style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none;"><div class="photo-clip-mask-left" style="position: absolute; left: 0px; right: 50%; top: 50%; bottom: 50%; width: auto; background-color: rgba(0, 0, 0, 0.5); margin-right: 150px; margin-top: -150px; margin-bottom: -150px;"></div><div class="photo-clip-mask-right" style="position: absolute; left: 50%; right: 0px; top: 50%; bottom: 50%; background-color: rgba(0, 0, 0, 0.5); margin-left: 150px; margin-top: -150px; margin-bottom: -150px;"></div><div class="photo-clip-mask-top" style="position: absolute; left: 0px; right: 0px; top: 0px; bottom: 50%; background-color: rgba(0, 0, 0, 0.5); margin-bottom: 150px;"></div><div class="photo-clip-mask-bottom" style="position: absolute; left: 0px; right: 0px; top: 50%; bottom: 0px; background-color: rgba(0, 0, 0, 0.5); margin-top: 150px;"></div><div class="photo-clip-area" style="border: 2px dashed rgb(221, 221, 221); position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; transform: translate(-50%, -50%);"></div></div></div>
			<div class="loading displaynone">正在载入图片...</div>
			<div class="footer">
			<dl>
				<dd style="background: #fe1041; color: #ffffff;border: none;">打开相册<input type="file" id="file" accept="image/jpeg, image/x-png, image/gif"></dd>
      	<dd id="clipBtn">完成裁剪</dd>
			</dl>
			<div class="back">取消</div>
			</div>
		</div>
	
	<script src="../jquery-1.11.1.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<script type="text/javascript" src="lrz.all.bundle.js"></script>
	<script type="text/javascript" src="iscroll-zoom-min.js"></script>
	<script type="text/javascript" src="PhotoClip.js"></script>
	<script>
		$(".btn").click(function(){
			$(".clipbg").fadeIn()
		})
		var clipArea = new  PhotoClip("#clipArea", {
				size: [300, 300],//裁剪框大小
				outputSize:[0,0],//打开图片大小，[0,0]表示原图大小
				file: "#file",
				ok: "#clipBtn",
				loadStart: function() { //图片开始加载的回调函数。this 指向当前 PhotoClip 的实例对象，并将正在加载的 file 对象作为参数传入。（如果是使用非 file 的方式加载图片，则该参数为图片的 url）
					$(".loading").removeClass("displaynone");

				},
				loadComplete: function() {//图片加载完成的回调函数。this 指向当前 PhotoClip 的实例对象，并将图片的 <img> 对象作为参数传入。
					$(".loading").addClass("displaynone");

				},
				done: function(dataURL) { //裁剪完成的回调函数。this 指向当前 PhotoClip 的实例对象，会将裁剪出的图像数据DataURL作为参数传入。			
					console.log(dataURL);//dataURL裁剪后图片地址base64格式提交给后台处理
					$(".clipbg").fadeOut();
					$('#headimg img').attr('src',dataURL);
				}
			});
			$(".back").click(function(){
				$(".clipbg").fadeOut()
			})
	</script>

</body></html>